<template>
  <div v-if="!loginCustomer" class="text-center" style="margin-top: 200px;">
    <v-btn color="success" style="margin: auto" @click="openLoginPage">请登录</v-btn>
  </div>
  <div v-else class="py-6">
    <v-card elevation="0">
      <v-card-text>
        <v-row>
          <v-col cols="3">
            <v-avatar size="60">
              <v-img :src="loginCustomer.avatar"/>
            </v-avatar>
          </v-col>
          <v-col class="pt-7">
            <h3>{{loginCustomer.nickName}}</h3>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <br>
    <v-card>
      <v-card-title>我的功能</v-card-title>
      <v-card-text>
        <v-row class="text-center">
          <v-col cols="3" @click="openNewPage('/my/address')">
            <div>
              <v-icon>mdi-home-outline</v-icon>
            </div>
            <div>我的地址</div>
          </v-col>
<!--          <v-col cols="3">-->
<!--            <div>-->
<!--              <v-icon>mdi-home-outline</v-icon>-->
<!--            </div>-->
<!--            <div>我的评价</div>-->
<!--          </v-col>-->
          <v-col cols="3" @click="openNewPage('/my/info')">
            <div>
              <v-icon>mdi-home-outline</v-icon>
            </div>
            <div>我的信息</div>
          </v-col>
          <v-col cols="12">
            <v-btn color="error" style="color: #f7f7ff" block @click="handleLogout">退出登录</v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import jsCookie from "js-cookie";

export default {
  name: "Index",
  computed:{
    loginCustomer() {
      return this.$store.state.customer;
    }
  },
  created() {
  },
  methods:{
    openLoginPage(){
      this.$router.push({
        path:'/login',
        query:{
          fromPath:'/my'
        }
      })
    },
    openNewPage(path){
      this.$router.push(path)
    },
    handleLogout(){
      jsCookie.remove("token")
      this.$router.go(0)
    }
  }
}
</script>

<style scoped>

</style>